<template>
	<view class="order-detail">
		<view>
			<view class="bold order-statu padding-15">
				<text v-if="info.shenhe_status<6">
						{{info.order_status_msg}}
				</text>
				<view v-else>已完成</view>
			
			</view>
			<view class="white_b padding-15 delivery-address align_center"
				v-if="info.shou_name||info.shou_phone||info.area">
				<view class="">
					<text class="iconfont iconshouhuodizhi fs-24 gray_font"></text>
				</view>
				<view class="flex-full ">
					<view class="flex_left_right">
						<text class="bold">{{info.shou_name}}</text>
						<text class="right">{{info.shou_phone}}</text>
					</view>
					<view v-if="info.ps_type==1" style="margin-top: 20rpx;">
						{{info.province+info.city+info.area+info.address}}</view>
					<view v-if="info.ps_type==2"
						style="margin-top: 20rpx;display: flex;align-items: center;justify-content: space-between;">
						<view>
							<view>{{info.shop.name}}</view>
							<view>{{info.shop.site}}</view>
						</view>
					</view>
					<view class="pos_box" v-if="info.ps_type==2">
						<view class="pos" @click="openMap">
							<u-icon name="map"></u-icon>
							<view class="p_text">导航</view>
						</view>
						<view class="pos" @click="call">
							<u-icon name="phone"></u-icon>
							<view class="p_text">联系门店</view>
						</view>
					</view>
				</view>
			</view>

		</view>

		<view>
			<view class="white_b good ">
				<view class="border title bold">商品信息</view>
				<view v-for="(item,index) in info.goods" :key="index" class="sign-good">
					<view class=" ">
						<view class="flex">
							<view class="photo">
								<image :src="imgRemote+item.goods_img" mode="aspectFill" class="r-5"></image>
							</view>
							<view class="flex-full flex-column flex-space-between">
								<view class="flex_left_right">
									<text>{{item.goods_name}}</text>
								</view>
								<view class="gray_font fs-11">
									<text>{{item.sku_guige}}</text>
								</view>
								<view class="flex_left_right">
									<text class="red-font">￥{{item.market_price}}</text>
									<text class="gray_font fs-11">下单数量：X{{item.buy_num}}</text>
								</view>
							</view>
						</view>

					
					</view>

				</view>
			</view>
			<view class="white_b good " style="margin-top: 30rpx;">

				<view class="border title bold">
					金额信息
				</view>
			
				<view class="total-fee" v-if="info.freights>0">
					<text>配送费</text>
					<text class="red">￥{{info.freights}}</text>
				</view>
				
				
			</view>

		</view>

		<view class="white_b fs-13 gray_font order-number flex-column">
			<view class="border bold fs-18 title">支付信息</view>
			<view>
				订单编号：{{info.order_num}}
			</view>
			<view>下单时间：{{$fomartDate(info.createtime).substr(0,10)}}</view>
			<view v-if="info.delivery_time">配送时间：{{($fomartDate(info.delivery_time)).substr(0,10)}}</view>
			<view v-if="info.pay_type">支付方式：
				<text v-if="info.pay_type=='wxpay'">微信支付</text>
				<text v-if="info.pay_type=='money'">余额支付</text>
				<text v-if="info.pay_type=='offline'">线下支付</text>
			</view>
			<view class="">
				配送方式：
				<text v-if="info.ps_type==1">配送</text>
				<text v-if="info.ps_type==2">自提</text>
			</view>
			<view class="">
				支付状态：
				<text v-if="info.pay_status==1">未支付</text>
				<text v-if="info.pay_status==2">已支付</text>
			</view>

		</view>
		<view style="height:74px;" v-if="info.shenhe_status<6"></view>
		<view class="bottom" v-if="info.shenhe_status<6">
			<view class="btn btn_blue" v-if="info.shenhe_status==2" @click="jie()">接单</view>
			<view class="btn btn_blue" v-if="info.shenhe_status=='4.5'" @click="start()">确认配送开始</view>
			<view class="btn btn_blue" v-if="info.shenhe_status=='5'" @click="que()">配送完成</view>
		</view>

    
	    <u-popup :closeable="true" v-model="show" mode="center" border-radius="14">
	    	
	    	<view class="form_box">
	    		
	    		<view class="xx_title">请填写配送说明</view>
	    
	    		<view class="xx_box">
	    			<view class="input_box">
	    				<textarea class="ms" v-model="form.content" placeholder="请输入备注说明"
	    					placeholder-style="color:#CECECE"></textarea>
	    			</view>
	    		</view>
	    
	    		<view class="xx_box">
	    			<view class="input_box">
	    				<view class="b_flex_c">
	    					<view class="img_text">上传图片/视频</view>
	    				</view>
	    				<view class="upload_box">
	    					<upload vmax='1' v-model="form.cimages"></upload>
	    				</view>
	    			</view>
	    		</view>
	    		
	    		<view class="dj_btn" @click="ques()">提交</view>
	    		
	    	</view>
	    </u-popup>


	</view>
</template>
<script>
	import upload from "@/components/upload.vue";
	export default {
		components: {
            upload
		},
		data() {
			return {
				imgRemote: getApp().globalData.imgRemote,
				time: 1222,
				id: '',
				ids: '',
				info: [],
				
				reason: '',
				orderIndex: '',
				addressInfo: '',
				totalPrice: 0,
				feeInfo: {},
				freight: 0,
				pay_type: 'wxpay',
				showAllRefund: true,
				show: false,
				showPay: 0,
				pay_password: '',
				price: '',
				show: false,
				form: {
					content: '',
					cimages: ''
				},
			}
		},
		methods: {
			que(){
				this.show = true;
			},
			jie() {
				let _ = this;
				uni.showModal({
					title: '温馨提示',
					content: '确认接单?',
					success: (res) => {
						if (res.confirm) {
							_.$post(_.$api.ojie, {
								id: this.info.id,
								token: uni.getStorageSync('wxToken')
							}, ress => {
								let {
									code,
									data,
									msg
								} = ress.data;
								_.$project.toast(msg);
								if (code == 1) {
									
									 _.getOrderDetail();
								}
							});
			
						}
					}
				})
			},
			ques(){
				let _=this;
				uni.showModal({
					title:'温馨提示',
					content:'确认服务完成?',
					success: (res) => {
						if(res.confirm){
							
							_.form.id=_.info.id;
							_.form.token=uni.getStorageSync('wxToken');
							
							_.$post(_.$api.wxoQue,_.form,ress=>{
								let {code,data,msg}=ress.data;
								_.$project.toast(msg);
								if(code==1){
									_.show=false;
									 _.getOrderDetail();
								}
							});
							
						}
					}
				})
			},
			start(){
				let _=this;
				uni.showModal({
					title:'温馨提示',
					content:'是否确认配送?',
					success: (res) => {
						if(res.confirm){
							
							_.$post(_.$api.wxoStart,{id:this.info.id,token:uni.getStorageSync('wxToken')},ress=>{
								let {code,data,msg}=ress.data;
									_.$project.toast(msg);
								if(code==1){
								
									 _.getOrderDetail();
									
								}
							});
							
						}
					}
				})
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.info.shop.mobile
				})
			},
			openMap() {
				let _ = this;
				uni.openLocation({
					latitude: _.info.shop.wd,
					longitude: _.info.shop.jd,
					name: _.info.shop.name,
					address: _.info.shop.site,
					complete(res) {
						console.log(res)
					}
				})
			},
			moneyPay(e) {
				this.pay_password = e;
				this.orderPay();

			},
			
			
			payWay(e) {
				this.pay_type = e.detail.value;
			},
			fixed(val) {
				return Number(val).toFixed(2);
			},
			applyReturnMoney(index) {
				uni.navigateTo({
					url: 'newSale?id=' + this.ids + '&returnIndex=' + index
				})
			},
			selectReson(e) {
				this.reason = e.detail;
			},
		
		
			getOrderDetail() {
				this.$get(this.$api.wxOrderInfo, {
					token: uni.getStorageSync('wxToken'),
					id: this.id
				}, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {

						this.info = data.data;
						this.ids = data.data.id;

					} else {
						this.$Toast(data.msg);
					}
				})
			},


			evaluate(item, id) {
				uni.setStorageSync('evaluateGood', item)
				uni.navigateTo({
					url: 'evaluate?id=' + id + '&index=' + this.orderIndex
				})
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.orderIndex = e.index;


		},
		onShow() {
			this.getOrderDetail(this.id)
		}


	}
</script>
<style scoped lang="scss">
	.order-detail .pay-method {
		padding: 0 20rpx 30rpx;

		.way {
			height: 80rpx;
			line-height: 80rpx;
		}

		.iconfont {
			font-size: 50rpx;
		}

		.submit-order {
			background: #FF7133;
			width: 200rpx;
			color: white;
			text-align: center;
			height: 60rpx;
			border-radius: 10rpx;
			line-height: 60rpx;
			margin: 0 auto;
		}
	}

	.order-detail {

		.order-statu {
			height: 100rpx;
			color: white;
			line-height: 100rpx;
			background: $m-c;
		}

		.explain {
			padding: 0 30rpx;
			// height: 120rpx;
			// line-height: 120rpx;
		}

		.button {
			justify-content: flex-end;
			height: 96rpx;
			margin-right: 30rpx;

			text {
				width: 140rpx;
				height: 46rpx;
				line-height: 42rpx;
				border-radius: 23rpx;
				font-size: 26rpx;
				display: inline-block;
				text-align: center;
				box-sizing: border-box;
				margin-left: 33rpx;
			}

			.cancel {
				border: 1px solid #333;
			}

			.go-pay {
				background: #FF3333;
				color: white;
			}

		}

		.delivery-address {
			margin: 0rpx 0 30rpx;

			//height: 160rpx;

			&>view:first-child {
				margin-right: 20rpx;
			}
		}

		.desc {
			padding: 30rpx 0 20rpx;

			.more-address text {
				height: 44rpx;
				line-height: 44rpx;
			}
		}

		.good {
			// margin-top: 30rpx;
			padding: 0rpx 30rpx 1rpx;

			.title {
				padding: 15rpx 0;
				font-size: 36rpx;
			}

			.sign-good {
				margin: 30rpx 0;

				.buy-num {
					margin-top: 20rpx;
					font-weight: normal;
				}



				.photo {
					width: 180rpx;
					height: 180rpx;
					margin-right: 30rpx;

					image {
						width: inherit;
						height: inherit;
					}
				}

				.return-button text {
					border-radius: 23rpx;
					border: 1px solid #999;
					font-weight: normal;
					width: 140rpx;
					height: 46rpx;
					justify-content: center;
					box-sizing: border-box;
				}
			}



			.total-fee {
				margin: 20rpx 0;
				display: flex;
				justify-content: space-between;
			}

			.paid-in {
				height: 90rpx;
				line-height: 90rpx;
			}
		}

		.order-number {
			padding: 0 30rpx 30rpx;
			margin: 29rpx 0;
			justify-content: space-between;
			box-sizing: border-box;

			.title {
				height: 70rpx;
				line-height: 70rpx;
				color: black;
			}

			&>view:nth-child(n+2) {
				padding-top: 30rpx;
			}
		}

		.cancel-order {
			border-radius: 20rpx 20rpx 0 0;
			padding: 40rpx 30rpx 30rpx;

			.title {
				margin-bottom: 40rpx;
			}

			.desc-reason {
				margin-bottom: 60rpx;
			}

			.submit {
				background: #57B127;
				color: white;
				border-radius: 39rpx;
				height: 78rpx;
				line-height: 78rpx;
				text-align: center;
			}
		}

		.fixed-buttons {
			position: fixed;
			bottom: 0;
			background: white;
			width: 100%;

			.return-good {
				color: #999;
				border: 1px solid #999;
			}

			.confirm-receipt {
				border: 1px solid #f33;
				color: #f33;
			}
		}

		.red-button text {
			margin-top: 10rpx;
			border-radius: 23rpx;

			font-weight: normal;
			width: 140rpx;
			height: 46rpx;
			justify-content: center;
			box-sizing: border-box;
			color: red;
			border: 1px solid red;
		}
	}

	.pos {

		box-sizing: border-box;
		padding: 10rpx 30rpx;
		border: 1rpx solid #eeeeee;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		margin-left: 20rpx;
	}

	.pos_box {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 0 0 3rpx 0;
	}

	.p_text {
		margin-left: 10rpx;
	}

	.pos_img {
		width: 35rpx;
	}
	.bottom{
		position: fixed;
		left:0;
		bottom: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		box-sizing: border-box;
		padding: 40rpx 30rpx 40rpx 30rpx;
		background-color: white;
	}
	.btn{
		box-sizing: border-box;
		padding: 15rpx 50rpx;
		border: 1rpx solid black;
		font-size: 26rpx;
		border-radius: 45rpx;
		margin-left: 20rpx;
	}
	.btn_red{
			border: 1rpx solid red;
			color:red;
	}
	.btn_blue{
		border: 1rpx solid #E34305;
		color:#E34305;
	}
	.red{
		color: red;
	}
	
	.dj_btn {
		box-sizing: border-box;
		padding: 25rpx 0;
		border-radius: 10rpx;
		background-color: #E71B06;
		color: white;
		
		margin-top: 30rpx;
		text-align: center;
	}
	
	.form_box {
		box-sizing: border-box;
		padding: 30rpx 20rpx;
		font-size: 28rpx;
	}
	
	.xx_box {
		box-sizing: border-box;
		padding: 0rpx 30rpx;
		background-color: #fff;
		border-radius: 15rpx;
		margin-bottom: 30rpx;
	}
	
	.input_box {
		box-sizing: border-box;
		padding: 30rpx 0;
	}
	
	.img_text {
		margin-left: 10rpx;
	}
	
	.ms {
		height: 220rpx;
		border: 1rpx solid #E7E5E5;
		box-sizing: border-box;
		padding: 20rpx 0 0 20rpx;
	}
	
	.xx_title {
		text-align: center;
		font-weight: bold;
	}
</style>